<template>
  <section class="menu">
    <div class="fix-top">
      <nav>
        <img src="@/assets/images/menu.jpg"/>
      </nav>
      <menu-classify @clickIndex="getIndex"/>
    </div>
    <menu-content :classifyId="classifyId" @transferData="transferData"/>
    <menu-alert-details/>
  </section>
</template>

<script>
import MenuClassify from './components/Classify'
import MenuContent from './components/Content'
import MenuAlertDetails from './components/AlertDetails'
export default {
  name: 'Menu',
  components: {
    MenuClassify,
    MenuContent,
    MenuAlertDetails
  },
  data () {
    return {
      classifyId: -1 // 不能默认等于0 要不然watch接受0的时候无法监听 传给content
    }
  },
  methods: {
    getIndex (index) { // 接受子组件classify传过来的参数 然后传给子组件content
      this.classifyId = index
    },
    transferData (data) {
      console.log(data)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .menu
    .fix-top
      position fixed
      top 0
      left 0
      z-index 9
      width 100%
      box-sizing border-box
      nav
        width 100%
        img
          width 100%
          height auto
</style>
